<template>
  <div class="home">
    <el-container>
      <el-aside width="300px">
        <h1>浙江车检检汽车服务有限公司</h1>
        <el-avatar :size="90" src="https://cartest.zjcjj.net/logo.png" ></el-avatar>
        <span style="font-size: 28px" >欢迎您，{{currentUser.username}}
           <el-tooltip class="item" effect="dark" content="点击退出登录" placement="top">
           <i class="el-icon-switch-button" @click="tuichu"></i>
           </el-tooltip>
        </span>

        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" v-for="items in menus" :key="items.path" :router="true">
          <el-submenu :index="items.path">
            <template slot="title">
              <i :class="items.icon"></i>
              <span>{{items.name}}</span>
            </template>
            <el-menu-item-group v-for="subitems in items.children" :key="subitems.path">
            
        <el-menu-item :index="subitems.path">  <i :class="subitems.icon"></i>{{subitems.name}}</el-menu-item>
            </el-menu-item-group>
           
          </el-submenu>

        </el-menu>
      </el-aside>
      <el-main>
        <router-view v-if="isShow"></router-view>
      </el-main>
       <el-backtop target=".el-main">
         <div style="width: 100%; height:100%;background:red; fontSize:16px; text-align: center;">回到顶部</div>
       </el-backtop>
    </el-container>
  </div>
</template>

<script>
import{mapState,mapMutations} from 'vuex'
export default {
  provide:function(){
     return{
       reload: this.reload,
     };
  },
     mounted:function(){
    this.$http.post("/sysUser/getUserMenus",this.currentUser).then(res=>{
      this.menus=res.data.object;
      // console.log(this.menus);
    })
  },
  data:function(){
    return {
      menus:[],
      isShow:true,
    }
  },
  methods: {
    ...mapMutations(["clear"]),
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    tuichu(){
      localStorage.removeItem("currentUser");
      this.clear();
     this.$router.replace("/login");
    },
    reload:function(){
      this.isShow=false;
      this.$nextTick(()=>{
        this.isShow=true
      })
    }
  },
  computed:{
    ...mapState(["currentUser"]),
    
  }
};
</script>
<style scoped lang="scss">
html,
body,
.home,
.el-container {
  height: 100%;
  background-color: #f6fafb;
  .el-aside {
    box-shadow: 0 0 40px 0 rgb(2 25 35 / 10%);
    padding: 0 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  h1 {
      color: #333;
      margin-top: 30px;
      font-weight: 500;
      font-size: 31px;
      text-align: center;
    }
  .el-avatar {
      text-align: center;
      margin: 32px 0 21px 0;
    }
  .el-menu{
    width: 100%;
    border: none;
  }
  .el-icon-switch-button{
    cursor: pointer;
  }
  }
}
</style>
